<template>
  <FormInfo>
    <template #left>今日汇率（更新于 {{ pageData.exchangeInfo.data?.lastDate }}）</template>
    <template #content>
      <div class="dashboard-view">
        <t-card
          :title="item.vrtName"
          :bordered="false"
          :shadow="true"
          :style="{ width: '31%' }"
          v-for="item in pageData.exchangeInfo.data?.exchangeRate"
          :key="item"
        >
          <div class="exchange-rate">
            <div class="exchange-rate__item">{{ item.price }}</div>
          </div>
          <!-- <template #actions>
        <t-button theme="primary">更新</t-button>
      </template> -->
        </t-card>
      </div>
    </template>
  </FormInfo>
</template>

<script setup lang="ts">
import { useUserStore } from "@/stores/modules/user";
import { reactive } from "vue";

import { getExchangeRateApi } from "@/api/exchange";

const userStore = useUserStore();

const pageData = reactive({
  userInfo: { ...userStore.userData },
  exchangeInfo: {} as Record<string, any>
});

const initDashboard = async () => {
  const exchangeRate = await getExchangeRateApi();
  // console.dir(exchangeRate);
  pageData.exchangeInfo.data = exchangeRate.data;
};

initDashboard();
</script>

<style lang="less" scoped>
.welcome-title {
  margin: 1rem 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.dashboard-view {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  gap: 1rem;
}

.exchange-rate {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem;
  padding-bottom: 2.3rem;
  &__item {
    font-size: 3rem;
    font-weight: bolder;
  }
}
</style>
